<template>
  <!-- 定义标签 -->
  <div :id="id" :style="{
      width: width,
      height: height,
    }"></div>
</template>

<script>
import * as echarts from 'echarts'
// 生成一个 id 值给标签，防止复用id重复
const uid = function () {
  return new Date().getTime()
}
export default {
  // 获取传过来的值
  props: {
    width: {
      typeof: String
    },
    height: {
      typeof: String
    },
    option: {
      typeof: Object,
      default () {
        return null
      }
    }
  },
  data () {
    return {
      // 定义 id 与 myChart图表实例
      id: null,
      myChart: null
    }
  },
  created () {
    // id赋值
    this.id = uid()
    console.log('id', this.id)
  },
  mounted () {
    // 创建echarts图表实例
    this.myChart = echarts.init(document.getElementById(this.id))
    // 指定图表的配置项和数据
    const option = this.option
    // 使用刚指定的配置项和数据显示图表。
    this.myChart.setOption(option)
    // 配置大小自适应
    const that = this
    window.onresize = function () {
      that.myChart.resize()
    }
  }
}
</script>
